function initPage(matches) {
    var Match = Backbone.Model.extend({
        defaults: {
            id: '1',
            contract_id: '1',
            country_name: 'country name',
            league_name: 'league name',
            home_name: 'home team',
            away_name: 'away team',
            current_time: 'current time in minutes',
            current_goal: 'current goal',
            under_goal: 'under goal',
            bet_amount: 'total settled amount',
            rate: 'rate',
            row_status: 'row status',
            won: 'won',
            settled_total_goals: 'goal at settled bet',
            settled_play_time: 'match time at settled bet',
            won_amount: '100',
            modify_timestamp: 'modify timestamp',
            bet_slip: 'bet slip',
            dangerous: '0',
            result_amount: '0'

        }
    });
    
    var AppInfo = Backbone.Model.extend({
        defaults: {
            running: 'init...',
            balance: 'init...'
        }
    });

    var Matches = Backbone.Collection.extend({
        model: Match
    });

    var MatchesView = Backbone.View.extend({
        tagName: 'tbody',
        el: '#matchTableRow',
        appInfo: null,
        initialize: function() {
            this.prepareData(matches);
            this.render();
        },
        working: '.working',
        prepareData: function(m) {
            infoData = m[0];
            this.appInfo = new AppInfo(infoData);
            
            m.shift();
            this.collection = new Matches(m);
        },
        reset: function() {
            this.collection.reset();
            this.$el.html("");
        },
        template: Handlebars.compile($("#matchTemplate").html()),
        render: function() {
            var self = this;
            var output = self.template({'matches': self.collection.toJSON()});
            self.$el.append(output);
            return self;
        },
        displayAppInfo: function(){
            document.title = '(' + this.appInfo.get('running') + ')::' + this.appInfo.get('balance') + ' || '+ 'Monitoring';
            $('#balance').text(this.appInfo.get('balance'));
        }
    });



    var view = new MatchesView();

    var source = new EventSource("events.php?sse=true");
    source.onmessage = function(e) {
        $('.working').show();
        setTimeout(function() {
            var data = JSON.parse(e.data);
            view.reset();
            view.prepareData(data);
            view.render();
            view.displayAppInfo();
            $('.working').hide();
        }, 1000);
    };
    source.onopen = function(e) {
        console.log("on open ");
    };
    source.onerror = function(event) {
        console.log("on error " + event);
    }
}

